<template>
  <div class="middle">
    <p-form-model ref="fuleForm" layout="inline" :model="form" :rules="rules">
      <p-row v-if="form.code && form.currStatus" :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="客户编号" prop="" style="width: 100%;">
            <span>{{ form.code }}</span>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="当前状态" prop="" style="width: 100%;">
            <span>{{ escapeState[form.currStatus] }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="客户名称" prop="customerName" style="width: 100%;">
            <p-input
              v-model="form.customerName"
              placeholder="请输入"
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="客户简称" prop="name" style="width: 100%;">
            <p-input
              v-model="form.name"
              placeholder="请输入"
              max-length="200"
              @input="nameChange"
            />
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="客户分类" prop="classificationCode" style="width: 100%;">
            <p-select
              v-model="form.classificationCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleSelectChange($event, 'classificationCode')"
            >
              <p-select-option
                v-for="item in classificationArr"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="销售组织" prop="salesOrgCode" style="width: 100%;">
            <p-select
              :value="form.salesOrgCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="salesGroupChange"
            >
              <p-select-option
                v-for="item in getOrgOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="销售组" prop="salesGroupCode" style="width: 100%;">
            <p-select
              :mode="showDeptMgrUser ? ' default' : 'multiple'"
              :value="form.salesGroupCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleSelectChange($event, 'salesGroupCode')"
            >
              <p-select-option
                v-for="item in getSalesGroupOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="KAPM组" prop="pmGroupCode" style="width: 100%;">
            <p-select
              :mode="showDeptMgrUser ? ' default' : 'multiple'"
              :value="form.pmGroupCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleSelectChange($event, 'pmGroupCode')"
            >
              <p-select-option
                v-for="item in getPmGroupOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="国家" prop="country" style="width: 100%;">
            <p-select
              :value="form.country"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleSelectChange($event, 'country')"
            >
              <p-select-option
                v-for="item in countryOptions"
                :key="item.cn"
                :value="item.cn"
              >
                {{ item.cn }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="省" prop="province" style="width: 100%;">
            <p-select
              :value="form.province"
              placeholder="请选择"
              :disabled="isDisabledInfo"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="provinceChange"
            >
              <p-select-option
                v-for="item in provinceOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="城市" prop="city" style="width: 100%;">
            <p-select
              :value="form.city"
              placeholder="请选择"
              :disabled="isDisabledInfo"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleSelectChange($event, 'city')"
            >
              <p-select-option
                v-for="item in cityOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="区域" prop="area" style="width: 100%;">
            <p-select
              :value="form.area"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              :disabled="isDisabledInfo"
              @change="handleSelectChange($event, 'area')"
            >
              <p-select-option
                v-for="item in getAreaOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row>
        <p-col :span="24" style="height: 90px;">
          <p-form-model-item label="详细地址" prop="address" style="width: 100%;">
            <p-textarea
              v-model="form.address"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
            <div v-show="addressRutes.isShow" class="remark">{{ addressRutes.text }}</div>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row>
        <p-col :span="24" style="height: 90px;">
          <p-form-model-item label="网站地址" prop="website" style="width: 100%;">
            <p-textarea
              v-model="form.website"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
            <div v-show="websiteRutes.isShow" class="remark">{{ websiteRutes.text }}</div>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row>
        <p-col :span="24" style="height: 90px;">
          <p-form-model-item label="备注" prop="remark" style="width: 100%;">
            <p-textarea
              v-model="form.remark"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
            <div v-show="remarkRutes.isShow" class="remark">{{ remarkRutes.text }}</div>
          </p-form-model-item>
        </p-col>
      </p-row>
      <div v-if="isEdit">
        <div style="margin-bottom: 10px;">
          <p-form-model-item label="附件" prop="" style="width: 100%;">
            <p-button @click="buttonClick"> <p-icon type="upload" /></p-button>
            <p-tooltip
              placement="top"
              title="附件上传的格式：xls,
          xlsx,
          doc,
          docx,
          ppt,
          pptx,
          gif,
          png,
          jpg,
          jpeg
          pdf,
          rar,
          zip,"
            >
              <p-icon
                type="question-circle"
                style="color: blue; margin-left: 15px; font-size: 14px;"
              />
            </p-tooltip>
          </p-form-model-item>
        </div>
        <div v-show="isload" style="margin-left: 110px; margin-top: 10px">
          <p-spin tip="附件上传中" size="small" />
        </div>
        <div style="padding-left: 68px; margin-bottom: 10px;">
          <div
            v-for="(item, i) in list"
            :key="item.id"
            class="upload-list"
          >
            <div class="box">
              <a :href="item.atthAccessPath">{{ item.atthName }}</a>
              <p-icon
                type="delete"
                style="
                  color: rgb(24, 144, 255);
                  cursor: pointer;
                  margin-left: 8px;"
                @click="deleteFile(item, i)"
              />
            </div>
          </div>
        </div>
      </div>
      <p-row
        v-if="form.createUserName && form.createTime"
        :gutter="16"
        style="margin-top: 26px"
      >
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="创建人" prop="" style="width: 100%;">
            <span>{{ form.createUserName }}</span>
          </p-form-model-item>
        </p-col>
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="创建时间" prop="" style="width: 100%;">
            <span>{{ form.createTime }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col v-if="form.createDeptName" :span="12" style="height: 56px;">
          <p-form-model-item label="创建人部门" prop="" style="width: 100%;">
            <span>{{ form.createDeptName }}</span>
          </p-form-model-item>
        </p-col>
        <p-col v-if="showDeptMgrUser" :span="12" style="height: 56px;">
          <p-form-model-item label="发起人部门主管" prop="deptMgrUserId" style="width: 100%;">
            <p-select
              v-model="form.deptMgrUserId"
              placeholder="请选择"
              :disabled="depcMgrDisabled"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @dropdownVisibleChange="deptMgrChange"
              @change="handleSelectChange($event, 'deptMgrUserId')"
            >
              <p-select-option
                v-for="item in depcMgrInfo"
                :key="item.uid"
                :value="item.uid"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>

    <DialogUploadCustomer
      ref="upload"
      uptype="customer"
      :list.sync="list"
      :accept="accept"
      :biz-id="code"
      :isload.sync="isload"
      @change="handleInsertChange"
    />
  </div>
</template>

<script>
import { getDicList } from '@/api/public';
import {
  getCoutryList,
  getProvincesList,
  postDepcMgrInfo,
  postFJdelete,
} from '@/api/customerApi';
import DialogUploadCustomer from '@/components/dialog/DialogUploadCustomer.vue';

export default {
  components: {
    DialogUploadCustomer,
  },
  props: {
    formInfo: {
      type: Object,
      default: () => ({}),
    },
    // planType: {
    //   type: String,
    //   default: 'BP',
    // },
    code: {
      type: [Number, String],
      default: '',
    },
    keyTabs: {
      type: String,
      default: '1',
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      remarkRutes: {
        isShow: false,
        text: ''
      },
      addressRutes: {
        isShow: false,
        text: ''
      },
      websiteRutes: {
        isShow: false,
        text: ''
      },
      isload: false,
      accept: [
        // '.txt',
        '.pdf',
        '.doc',
        '.docx',
        '.xls',
        '.xlsx',
        '.ppt',
        '.pptx',
        '.jpg',
        '.png',
        // '.bmp',
        '.gif',
        'jpeg',
        '.rar',
        '.zip',
        // '.avi',
        // '.mp4',
        // '.rmvb',
        // '.wps',
      ],
      form: {
        processId: '',
        id: '',
        code: '',
        currStatus: '',
        createUserName: '',
        createTime: '',
        createDeptName: '',
        customerName: '',
        name: '',
        classificationCode: '',
        salesOrgCode: '',
        salesOrgName: '',
        salesGroupName: '',
        salesGroupCode: [],
        pmGroupName: '',
        pmGroupCode: [],
        country: '',
        province: '',
        city: '',
        area: '',
        address: '',
        remark: '',
        website: '',
        deptMgrUserId: '',
        deptMgrUserName: '',
        attachmentIds: [],
      },
      classification: [],
      areaOptions: [],
      salesGroupOptions: [],
      pmGroupOptions: [],
      countryOptions: [],
      provinceOptions: [],
      cityOptions: [],
      provinceArr: [],
      depcMgrInfo: [],
      list: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入客户简称',
            trigger: 'blur',
          },
          {
            max: 200,
            message: '最多只能输入200字',
            trigger: 'blur',
          },
        ],
        customerName: [
          {
            required: true,
            message: '请输入客户名称',
            trigger: 'blur',
          },
          {
            max: 200,
            message: '最多只能输入200字',
            trigger: 'blur',
          },
        ],
        salesOrgCode: [
          {
            required: true,
            message: '请选择销售组织',
            trigger: 'change',
          },
        ],
        salesGroupCode: [
          {
            required: true,
            message: '请选择销售组',
            trigger: 'change',
          },
        ],
        pmGroupCode: [
          {
            required: true,
            message: '请选择KAPM组',
            trigger: 'change',
          },
        ],
        country: [{ required: true, message: '请选择国家', trigger: 'change' }],
        province: [
          {
            required: true,
            message: '请选择省',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.form.country !== '中国' || value) {
                callback();
              } else if (!value) {
                callback(new Error(rule.message));
              }
            },
          },
        ],
        city: [
          {
            required: true,
            message: '请选择城市',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.form.country !== '中国' || value) {
                callback();
              } else if (!value) {
                callback(new Error(rule.message));
              }
            },
          },
        ],
        deptMgrUserId: [
          {
            required: true,
            message: '请选择发起人部门主管',
            trigger: 'change',
          },
        ],
      },
      uploadList: [],
    };
  },
  computed: {
    showDeptMgrUser() {
      const route = ['/customer-creation']
      return route.includes(this.$router.currentRoute.fullPath);
    },
    getformInfo() {
      return this.formInfo || {};
    },
    // 销售组织
    getOrgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: false,
      });
    },
    classificationArr() {
      return this.classification || [];
    },
    getAreaOptions() {
      return this.areaOptions || [];
    },
    // 销售组
    getSalesGroupOptions() {
      return this.salesGroupAll || [];
    },
    // kapm组
    getPmGroupOptions() {
      return this.pmGroupAll || [];
    },
    getCountryOptions() {
      return this.countryOptions || [];
    },
    isDisabledInfo() {
      return this.form.country !== '中国';
    },
    escapeState() {
      return this.$store.state.dictionary.dict['state'] || {};
    },
    depcMgrDisabled() {
      return this.depcMgrInfo?.length === 1;
    },
    rulesRemark() {
      return this.form.remark && this.form.remark.length > 255 || false
    },
    rulesAddress() {
      return this.form.address && this.form.address.length > 1000 || false
    },
    rulesWebsite() {
      return this.form.website && this.form.website.length > 255 || false
    },
    // 销售组父节点相同
    // salesparentCode() {
    //   const first = this.form.salesGroupCode[0];
    //   const item = this.salesGroupAll.find((item) => item.code === first) || {};
    //   return item.parentCode;
    // },
    // salesOptionsFilter() {
    //   return this.salesGroupAll.filter(
    //     (item) => !this.salesparentCode || item.parentCode === this.salesparentCode
    //   );
    // },
    salesGroupAll() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
    },
    // KAPM组父节点相同
    // pmparentCode() {
    //   const first = this.form.pmGroupCode[0];
    //   const item = this.pmGroupAll.find((item) => item.code === first) || {};
    //   return item.parentCode;
    // },
    // pmOptionsFilter() {
    //   console.log(this.pmGroupAll.filter(
    //     (item) => !this.pmparentCode || item.parentCode === this.pmparentCode
    //   ))
    //   return this.pmGroupAll.filter(
    //     (item) => !this.pmparentCode || item.parentCode === this.pmparentCode
    //   );
    // },
    pmGroupAll() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
    },
  },
  watch: {
    keyTabs: {
      handler(val) {
        if (val === '1') {
          this.getClassificationList();
          this.areaOptionsList();
          this.getCoutryInfoList();
          this.getProvincesList();
          this.showDeptMgrUser && this.getDepcMgrInfo();
        }
      },
      immediate: true,
    },
    formInfo: {
      handler(val) {
        if (val) {
          this.form.processId = val.processId;
          this.form.id = val.id;
          (this.form.code = val.code),
            (this.form.currStatus = val.currStatus),
            (this.form.createUserName = val.createUserName),
            (this.form.createTime = val.createTime),
            (this.form.createDeptName = val.createDeptName),
            (this.form.customerName = val.customerName);
          this.form.name = val.name;
          this.form.classificationCode = val.classificationCode;
          this.form.salesOrgCode = val.salesOrgCode;
          this.form.salesOrgName = val.salesOrgName;
          this.form.salesGroupCode = this.showDeptMgrUser ? val.salesGroupCode : val.salesGroupCode && [
            ...val.salesGroupCode?.split(','),
          ];
          this.form.salesGroupName = val.salesGroupName;
          this.form.pmGroupCode = this.showDeptMgrUser ? val.pmGroupCode : val.pmGroupCode && [
            ...val.pmGroupCode?.split(','),
          ];
          this.form.pmGroupName = val.pmGroupName;
          this.form.country = val.country;
          this.form.province = val.province;
          this.form.city = val.city;
          this.form.area = val.area;
          this.form.address = val.address;
          this.form.remark = val.remark || '';
          this.form.website = val.website;
          this.form.deptMgrUserName = val.deptMgrUserName;
          this.form.deptMgrUserId = val.deptMgrUserId;
          if (val.attachments?.length) {
            this.list = []
            val.attachments?.forEach((item) => {
              this.list.push({
                atthName: item.atthName,
                atthAccessPath: item.atthAccessPath,
                id: item.id,
              });
            });
          }
          // console.log(this.showDeptMgrUser, this.form.pmGroupCode, this.form.salesGroupCode)
        }
      },
      deep: true,
      immediate: true,
    },
    'form.website': {
      handler(val) {
        if (!val || val?.length < 255) {
          this.websiteRutes.isShow = false
          this.websiteRutes.text = ''
        }
        if (val?.length > 255) {
          this.websiteRutes.isShow = true
          this.websiteRutes.text = '输入内容过长'
        }
      },
      deep: true,
    },
    'form.remark': {
      handler(val) {
        if (!val || val?.length < 255) {
          this.remarkRutes.isShow = false
          this.remarkRutes.text = ''
        }
        if (val?.length > 255) {
          this.remarkRutes.isShow = true
          this.remarkRutes.text = '输入内容过长'
        }
      },
      deep: true,
    },
    'form.address': {
      handler(val) {
        if (!val || val?.length < 1000) {
          this.addressRutes.isShow = false
          this.addressRutes.text = ''
        }
        if (val?.length > 1000) {
          this.addressRutes.isShow = true
          this.addressRutes.text = '输入内容过长'
        }
      },
      deep: true,
    },
    // 'formInfo.salesOrgCode': {
    //   handler(val) {
    //     if (val) {
    //       this.salesGroupCallback(val);
    //       this.pmGroupCallback(val);
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    list: {
      handler(val) {
        if (val) {
          let arr = val?.map((item) => {
            return item.id;
          });
          // let list = [...new Set(arr)];
          this.form.attachmentIds.splice(0, this.form.attachmentIds.length);
          if (this.list?.length) {
            this.list?.forEach((v) => {
              this.form.attachmentIds.push(v.id);
            });
          }
          // this.form.attachmentIds.push(...list);
          // console.log(this.form.attachmentIds,'1q');
        }
      },
      deep: true,
      // immediate: true,
    },
    provinceArr: {
      handler(val) {
        if (val && this.form.province) {
          this.cityDefaultOptions(val, this.form.province)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    deptMgrChange() {
      this.getDepcMgrInfo();
    },
    handleInsertChange(val) {
      console.log(val);
    },
    async deleteFile(item, i) {
      const result = await postFJdelete([item.id]);
      if (result.data.code === 0) {
        this.list.splice(i, 1);
      }
    },
    async selectList(code) {
      const result = await getDicList(code);
      return result?.data?.data || [];
    },
    async getDepcMgrInfo() {
      const res = await postDepcMgrInfo();
      const list = res?.data?.data || [];
      if (!list?.length) {
        this.$message.error('请联系IT人员维护部门主管！');
      }
      if (list?.length === 1) {
        this.form.deptMgrUserId = list[0].uid;
        this.form.deptMgrUserName = list[0].name;
      }
      this.depcMgrInfo = list;
    },
    provinceChange(value) {
      this.form.province = value;
      this.form.city = ''
      this.cityDefaultOptions(this.provinceArr, value)
      // let data = this.provinceArr?.find((item) => {
      //   return item.name === value;
      // });
      // let city = data?.city?.map((item) => {
      //   return {
      //     value: item.name,
      //     label: item.name,
      //   };
      // });
      // this.cityOptions = city || [];
    },
    cityDefaultOptions(otion, val) {
      let data = otion?.find((item) => {
        return item.name === val;
      });
      let city = data?.city?.map((item) => {
        return {
          value: item.name,
          label: item.name,
        };
      });
      this.cityOptions = city || [];
    },
    async getProvincesList() {
      const res = await getProvincesList();
      const data = res?.data?.data;
      this.provinceArr = data || [];
      let val = data?.map((item) => {
        return {
          value: item.name,
          label: item.name,
        };
      });
      this.provinceOptions = val || [];
      // console.log(this.provinceArr, 'options');
    },
    async getCoutryInfoList() {
      const res = await getCoutryList();
      const data = res?.data?.data;
      // console.log(data,'op');
      this.countryOptions = data || [];
    },
    // 区域List
    async areaOptionsList() {
      const result = await this.selectList('customer_area');
      this.areaOptions = result;
    },
    // 客户分类List
    async getClassificationList() {
      const result = await this.selectList('customer_type');
      this.classification = result;
    },
    salesGroupChange(code) {
      const val = this.getOrgOptions?.find((item) => item.code === code)
      this.form.salesOrgCode = code;
      this.form.salesOrgName = val.name;
      this.form.salesGroupName = '';
      this.form.pmGroupName = '';
      this.form.salesGroupCode = [];
      this.form.pmGroupCode = [];
      // console.log('code: ', code);
      // this.$emit('input', code);
      // this.salesGroupCallback(code);
      // this.pmGroupCallback(code);
    },
    // async salesGroupCallback(value) {
    //   this.salesGroupOptions = this.$store.getters.getOrg({
    //     code: value,
    //     type: 'sales',
    //     isDict: false,
    //   });
    // },
    // async pmGroupCallback(value) {
    //   this.pmGroupOptions = this.$store.getters.getOrg({
    //     code: value,
    //     type: 'kapm',
    //     isDict: false,
    //   });
    // },
    // 选中值
    handleSelectChange(val, key) {
      this.form[key] = val;
      if (key === 'country' && val !== '中国') {
        this.form.province = '';
        this.form.city = '';
      }
      if (key === 'salesGroupCode') {
        let salesNameList = this.calcCodeVal(val, this.getSalesGroupOptions);
        this.form.salesGroupName = salesNameList?.join(',')
      }
      if (key === 'pmGroupCode') {
        let kapmNameList = this.calcCodeVal(val, this.getPmGroupOptions);
        this.form.pmGroupName = kapmNameList?.join(',')
      }
      if (key === 'deptMgrUserId') {
        let depcMgrid = this.depcMgrInfo?.find((item) => {
          return item.uid === val
        })
        this.form.deptMgrUserName = depcMgrid.name;
      }
    },
    calcCodeVal(code, option) {
      return option?.reduce((pre, cur) => {
        if (code?.includes(cur.code)) {
          pre.push(cur.name)
        }
        return pre
      }, []);
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.fuleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
    buttonClick() {
      this.$refs.upload?.uploader();
    },
  },
};
</script>

<style lang="less" scoped>
.middle {
  padding: 16px 0px;
  /deep/ .poros-form-inline .poros-form-item > .poros-form-item-label {
    width: 110px;
  }
  /deep/.poros-form-item-control-wrapper {
    width: calc(100% - 200px);
  }
  // /deep/ .poros-col {
  //   padding-bottom: 12px;
  // }
  .upload-list {
    display: inline-block;
    margin-right: 16px;
    .box {
      display: flex;
      align-items: center;
    }
  }
  .remark {
    position: absolute;
    top: 18px;
    left: 0px;
    height: 14px;
    color: red;
    font-size: 12px;
    font-weight: 400;
  }
}
</style>
